<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>sgd - Login </title>
        <script type="text/javascript" src="js/jquery.js" ></script>
        <script type="text/javascript" src="js/jquery.validate.js"></script>
        <link rel="shortcut icon" href="favicon.ico">
        <link rel="stylesheet" type="text/css" href="login/style.css" />
    </head>
    <script>
        $(document).ready(function(){
            $("#login-form").validate({
                rules: {
                    login: {required: true}
                    ,senha: {required: true}
                },
                submitHandler: function(form) {
                    login();
                }
            });

            $("#login").focus();
            
        });
        function login(){
            var form = document.forms[0];
            var params = $(form).serialize();
            $.ajax(
            {
                contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
                type: "POST",
                url: form.action,
                data:params,
                beforeSend: function() {
                    // exibe na tela uma
                    // msg de carregando
                    $('#msg').html('<img src="/sgd/imagens/loading.gif"/>');
                },
                success: function(txt) {
                    $('#msg').html(txt);
                },
                error: function(txt) {
                    alert('Houve um problema interno. tente novamente mais tarde.');
                }
            }
        );
        }
    </script>
    <body>

        <form id="login-form" action="login.jsp" method="post">
            <fieldset><legend>Dados</legend>

                <legend>Log in</legend>

                <label for="login">Usuário</label>
                <input type="text" id="login" name="login"/>
                <div class="clear"></div>

                <label for="password">Senha</label>
                <input type="password" id="password" name="senha"/>
                <div class="clear"></div>

                <!--label for="remember_me" style="padding: 0;">Remember me?</label>
            <input type="checkbox" id="remember_me" style="position: relative; top: 3px; margin: 0; " name="remember_me"/-->
                <div class="clear"></div>
                <br />
                <input type="submit" style="margin: -20px 0 0 287px;" class="button" name="commit" id="commit" value="Entrar"/>
                <div id="msg">

                </div>
            </fieldset>
        </form>

    </body>

</html>